<template>
  <!-- 推送进度 -->
  <div>
    <el-card>
      <div class="page-title">
        <span>推送进度</span>
      </div>
    </el-card>
    <el-card style="margin-top: 20px;">
      <el-form ref="queryForm" :model="queryForm" size="small">
        <el-row style="display: flex;flex-wrap: wrap;">
          <el-col :lg="6" :md="8" :sm="12" :xs="24" style="padding: 0;">
            <el-form-item prop="sendStatus">
              <el-select v-model="queryForm.sendStatus" clearable placeholder="任务状态" style="width: 100%;">
                <el-option v-for="item in sendStatusList" :key="item.value" :label="item.label"
                           :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="8" :sm="12" :xs="24" style="padding: 0;">
            <el-form-item prop="selectDate">
              <el-date-picker v-model="queryForm.selectDate"
                              end-placeholder="结束日期"
                              format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
                              style="width: 100%;" type="daterange"
                              value-format="yyyy-MM-dd" @change="(val) => dateChange(val, { fileBytes: ['startDate', 'endDate'] }, 'queryForm')"/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="8" :sm="12" :xs="24" style="padding: 0;">
            <el-form-item>
              <div style="float: right;">
                <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">查 询</el-button>
                <el-button icon="el-icon-refresh" plain size="mini" type="info" @click="handleReset">重 置</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px;">
      <el-table v-loading="loading" :data="tableList" height="442px">
        <el-table-column align="center" label="超级企微" prop="automateId"/>
        <el-table-column align="center" label="用户" prop="userName" min-width="200px">
          <template slot-scope="scope">
            <div v-if="scope.row.userName">
              <img :src="scope.row.userAvatar" style="width: 30px;height: 30px;margin-right: 6px;border-radius:50%;">
              <span style="margin-left: 10px">{{scope.row.userName}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发送状态" prop="sendStatus"/>
        <el-table-column align="center" label="更新时间" prop="updateTime"/>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></NormalPagination>
    </el-card>
  </div>
</template>

<script>
import {queryProgressList} from "@/api/dispatchCustomer";

export default {
  name: 'AddDetails',
  data() {
    return {
      loading: false,
      sendStatusList: [
        {value: '0', label: '未开始'},
        {value: '1', label: '进行中'},
        {value: '2', label: '执行成功'},
        {value: '3', label: '执行失败'},
        {value: '4', label: '已取消'},
        {value: '5', label: '已终止'},
      ],
      queryForm: {
        sendStatus: '',
        selectDate: '',
        startDate: '',
        endDate: '',
        pageNum: 1,
        pageSize: 20,
      },
      total: 0,
      tableList: [],
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getListFn()
    },
    handleReset() {
      this.queryForm = {
        sendStatus: '',
        selectDate: '',
        startDate: '',
        endDate: '',
        pageNum: 1,
        pageSize: 20,
      }
      this.handleQuery()
    },
    getListFn() {
      let obj = {
        sendStatus: this.queryForm.sendStatus,
        startDate: this.queryForm.startDate,
        endDate: this.queryForm.endDate,
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
        messageId: this.$route.query.id
      }
      this.loading = true
      queryProgressList(obj).then(res => {
        this.loading = false
        this.tableList = res.rows || []
        this.total = res.total || 0
      }).catch(() => {
        this.loading = false
      })
    },
    // 翻页
    handleSizeChange(value) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = value
      this.getListFn()
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.getListFn()
    },
    // range 日期change事件
    dateChange(val, item, byte) {
      let valNew = val || ["", ""];
      item.fileBytes.forEach((fileByte, index) => this.$set(this[byte], fileByte, valNew[index]));
    },

  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";
</style>
